<template>
  <div id="detail">
    <DetailNavbar @titleClick="titleClick" />
      <div>
        <DetailSwiper :topImages="topImages"/>
        <DetailBaseInfo :goods="goods" />
        <DetailShopInfo :shop="shop" />
        <DetailGoodsInfo :detailInfo="detailInfo" />
        <DetailParamInfo :paramInfo="paramInfo"/>
        <DetailCommentInfo :commentInfo="commentInfo"/>
        <GoodsList :goods="recommendInfo" />
      </div>
    <DetailBottom @addCart="addToCart" />
  </div>
</template>

<script>
import DetailNavbar from "./childCpn/detail-navbar";
import DetailSwiper from "./childCpn/detail-swiper";
import DetailBaseInfo from "./childCpn/detail-baseInfo";
import DetailShopInfo from "./childCpn/detail-shopInfo";
import DetailBottom from "./childCpn/detail-bottom";
import DetailGoodsInfo from "./childCpn/detail-goodsInfo";
import DetailParamInfo from "./childCpn/detail-param-info";
import DetailCommentInfo from "./childCpn/detail-commentInfo";

// import Scroll from "@/components/scroll/scroll";
import GoodsList from "@/components/goods/goods-list";

import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  getDetailRecommend,
} from "@/services/detail";

export default {
  name: "detail",
  components: {
    DetailNavbar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailBottom,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommendInfo: []
    };
  },
  created() {
    // 保存传入的iid
    this.iid = this.$route.params.iid;
    // 根据iid请求详情数据
    getDetail(this.iid).then((res) => {
      // 获取商品图片
      this.topImages = res.result.itemInfo.topImages;
      // 获取商品信息
      this.goods = new Goods(
        res.result.itemInfo,
        res.result.columns,
        res.result.shopInfo.services
      );
      // 获取商家信息
      this.shop = new Shop(res.result.shopInfo);
      // 保存商品的详情数据
      this.detailInfo = res.result.detailInfo;
      // 保存参数信息
      this.paramInfo = new GoodsParam(
        res.result.itemParams.info,
        res.result.itemParams.rule
      );
      // 评论信息
      if (res.result.cRate !== 0) {
        this.commentInfo = res.result.rate.list[0];
      }
    });

    getDetailRecommend().then((res) => {
      this.recommendInfo = res.data.list;
    });
  },
  methods: {
    titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.themeTops[index], 100);
    },
    addToCart() {
      // 1.获取需要展示的商品
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;

      // 2.将商品添加到购物车里
      this.$store.commit("addCart", product);
    },
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 99999;
  background-color: #fff;
}
</style>